<template>
  <div>
    <el-progress
      type="circle"
      :percentage="percentage"
      :width="80"
      :format="format"
    ></el-progress>
  </div>
</template>

<script>
import { mapState } from "vuex";
import tools from "../../api/audit/tools";
export default {
  data() {
    return {
      timerTxt: "00:00",
      percentage: 100,
    };
  },
  mounted() {
    this.start();
  },
  methods: {
    format() {
      return this.timerTxt;
    },
    start() {
      let totalSeconds = this.totaltime * 60;
      let leftSeconds = totalSeconds;
      const interval = setInterval(() => {
        let min = Math.floor(leftSeconds / 60);
        let sec = leftSeconds % 60;
        this.timerTxt = this.fill0(min) + ":" + this.fill0(sec);
        //倒计时百分比
        this.percentage = (leftSeconds / totalSeconds) * 100;
        if (leftSeconds == 0) {
          clearInterval(interval);
          //计算分的
          const socre = this.getScore(this.randomQuestion);
          this.$parent.doStudyEnd(this.totaltime, socre);

          // this.$alert(
          //   `<strong>考试时间到</strong><br><div>用时:${this.totaltime}分钟</div><div>分数:????</div>`,
          //   "提示",
          //   {
          //     confirmButtonText: "确定",
          //     dangerouslyUseHTMLString: true,
          //   }
          // );
        }
        leftSeconds--;
      }, 1000);
    },
  },
  computed: {
    ...mapState("test/questions", ["totaltime", "randomQuestion"]),
  },
  mixins: [tools],
};
</script>

<style scoped>
.el-progress {
  margin-top: 24px;
  float: right;
}
</style>